<template>
	<view>
		<view class="content" v-for=" item in findDetail">
			<view class="navImgBox">
				<image :src="item.titleImg" mode="widthFix" @click="toDetail"></image>
			</view>
			<scroll-view class="findDetailBox" scroll-x="true" enable-flex = 'true'>
				<view class="findDetail" v-for="term in item.findList " @click="toDetail">
					<view class="findImg">
						<image :src="term.goodsImgUrl"></image>
					</view>
					<view class="findName">
						{{term.goodsDiscrible}}
					</view>
					<view class="findPrice">
						￥{{term.goodsPrice}}
					</view>
				</view>
				<view class="findDetail"  @click="toDetail">
					<view class="findMore">
						查看更多>>
					</view>
				</view>
			</scroll-view>
		</view>
		<car :price = 'price'></car>
	</view>
    
</template>

<script>
	import until from '../../until/until.js'
	import car from '../../until/com/car.vue'
	import * as url from '../../until/api.js'
    export default {
        name: "find",
		data(){
			return{
				titleImg:[],
				findList:[],
				findDetail:[],
				price:0,
			}
		},
		components:{
			car,
		},
		created(){
			uni.request({
				url:url.getFindData,
				method:'POST',
				success:res=>{
					// for(let i = 0; i < res.data.length; i ++){
					// 	this.titleImg.push(res.data[i].titleImg);
					// 	this.
					// }
					// console.log(res.data)
					this.findDetail = JSON.parse(JSON.stringify(res.data))
				}
			})
		},
		onShow(){
		            this.price=parseInt(until.getMoneyNum());   //将价格传给购物车小图标
		        },
		methods:{
			toDetail(e){
				uni.navigateTo({
					url:'../findDetail/findDetail'
				})
			}
		}
    }
</script>

<style scoped>
	.content{
		width: 100%;
		margin:  0 auto;
	}
	.navImgBox{
		
	}
	.navImgBox > image{
		width: 100%;
		border-radius: 5px;
	}
	.findDetailBox{
		height: 9rem;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.findDetail{
		height:9rem;
		width: 6rem;
	}
	.findImg{
		width: 6rem;
		height: 5rem;
		position: relative;
		overflow: hidden;
	}
	.findImg > image{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	.findName{
		width: 6rem;
		height: 1.5rem;
		font-size: .8rem;
		line-height: 1.5rem;
		text-align: center;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #3b3b3b;
	}
	.findPrice{
		width: 6rem;
		height: 1.5rem;
		font-size: .7rem;
		line-height: 1.5rem;
		text-align: center;
		color: #f50;
	}
	.findMore{
		width: 6rem;
		height: 9rem;
		text-align: center;
		line-height: 9rem;
		font-size: 1rem;
		font-weight: bold;
	}
	
</style>